revision:
<div>
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />
<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
</div>
<style>
.day {background: #eee;color: black;}
.night {background: #333; color: white;}
@media (prefers-color-scheme: dark) {
.day.dark-scheme {background: #333; color: white; }
.night.dark-scheme {background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555;}
.night.light-scheme { background: #eee; color: black;}
}
.day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle;}
</style>
This section will react to the users system or user agent setting.
This section will be light due to the color-scheme: light;.
This section will be dark due to the color-scheme: dark;.
<div id="frame">
<section>
<h3>Automatic</h3>
<p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
<h3>Light</h3>
<p>This section will be light due to the <code>color-scheme: light;</code>.</p>
</section>
<section class="dark">
<h3>Dark</h3>
<p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>
</div>
<style>
#frame{width: 45vw; height: 40vh;}
#frame * {background-color: light-dark(var(--light-bg), var(--dark-bg)); color:
light-dark(var(--light-color), var(--dark-color));}
code {color: light-dark(var(--light-code), var(--dark-code));}
.light { color-scheme: light;}
.dark {color-scheme: dark;
}
</style>
<div>
<div id="simulateDarkMode" class="container" data-theme="light">
<button id="toggleDarkMode" type="button" class="btn-toggle" onclick="toggleDarkMode()">
DARK MODE</button>
</div>
</div>
<style>
[data-theme="dark"] {--brand-basic: #31456a; --brand-accent: #dee8f3;}
.container {height: 50vh; display: flex; justify-content: center; align-items: center;
background-color: var(--brand-basic); transition: color 0.3s, background-color 0.3s;}
.btn-toggle {background-color: var(--brand-basic); color: var(--brand-accent); height: 2.5vw;
width: 9vw; font-size: 1vw; border-radius: 0.25vw; letter-spacing: 0.01vw;
font-weight: bold; display: flex; justify-content: center; align-items: center;
transition: color 0.3s, background-color 0.3s; cursor: pointer;
border: 0.2vw solid var(--brand-accent);}
.button-toggle:hover {background-color: var(--brand-accent);color: var(--brand-basic);}
.button-toggle:focus {outline: none;}
</style>
<script>
function toggleDarkMode() {
const container = document.getElementById('simulateDarkMode');
const buttonDarkMode = document.getElementById('toggleDarkMode');
const dataTheme = container.getAttribute('data-theme');
if(dataTheme === 'dark') {
container.setAttribute('data-theme', 'light');
buttonDarkMode.innerHTML = 'DARK MODE';
} else {
container.setAttribute('data-theme', 'dark');
buttonDarkMode.innerHTML = 'LIGHT MODE';
}
}
</script>
<div id="frame-1">
<nav class="navbar">
<span class="logo">Company Logo</span>
<ul class="nav__lists">
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="theme__switcher">
<button type="button" id="btn-toggle1">toggle</button>
</div>
</nav>
<main>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.</main>
</div>
<style>
.navbar {display: flex; padding: 1vw; font-size: 1.3vw; align-items: center;
color: rgb(176, 58, 46); background-color: #fdedec;}
.navbar span { margin-right: auto; }
.logo {font-weight: 600; }
.nav__lists { display: flex; list-style: none; column-gap: 2vw; margin: 0 2vw; }
#btn-toggle1 { cursor: pointer; width: 5vw; height: 2vw; background-color: skyblue;}
main {width: 45vw; height: auto; margin: 2vw auto; font-size: 1vw;line-height: 2;padding: 1vw 2vw;
border-radius: 1vw; box-shadow: 2px 3.5px 5px rgba(242, 215, 213, 0.4);}
.dark { background: #1f1f1f; color: #fff;}
.light {background: #fff; color: #333;}
</style>
<script>
const themeToggle = document.getElementById("btn-toggle1");
const bodyEl = document.getElementById('frame-1');
function setTheme(theme) {
bodyEl.classList.toggle("dark", theme === "dark");
bodyEl.classList.toggle("light", theme !== "dark");
themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}
function toggleTheme() {
setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");
}
themeToggle.addEventListener("click", toggleTheme);
</script>
Click the toggle to switch between dark and light modes.
<div id="frame-2">
<div class="container-1">
<p>Click the toggle to switch between dark and light modes.</p><br>
<div class="toggle-container" id="-1">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</div>
</div>
<style>
:root {--clr-dark: #333; --clr-light: #fff; }
#frame-2{font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center;
height: 50vh; width: 40vw; margin: 0; background-color: var(--clr-light); color: var(--clr-dark);
transition: background-color 0.3s, color 0.3s;}
.container-1 {text-align: center; width: 30vw;}
.dark-mode {background-color: var(--clr-dark); color: var(--clr-light);}
.toggle-container {cursor: pointer;}
.sun-icon, .moon-icon { width: 24px; height: 24px;transition: opacity 0.3s;}
.moon-icon {display: none;}
.dark-mode .sun-icon {display: none; }
.dark-mode .moon-icon {display: inline-block;}
</style>
<script>
const _1 = document.getElementById('-1');
const body = document.getElementById("frame-2");
_1.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark-mode');
} else {
localStorage.setItem('theme', '');
}
});
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
body.classList.add(currentTheme);
}
</script>
<div>
<main class="frame-3">
<div>
<label for="lightdark">Light/Dark Mode:</label>
<select id="lightdark">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div>
<label for="contrast">Contrast Mode:</label>
<select id="contrast">
<option value="auto">Auto</option>
<option value="high">High</option>
<option value="low">Low</option>
</select>
</div>
</main>
</div>
<style>
:root {color-scheme: light dark;}
:root:has(#lightdark option[value="light"]:checked) {color-scheme: light;}
:root:has(#lightdark option[value="dark"]:checked) {color-scheme: dark;}
:root:has(#contrast option[value="low"]:checked) {filter: contrast(75%);
color: CanvasText; background-color: Canvas;}
:root:has(#contrast option[value="high"]:checked) {
& .frame-3 {background-color: Canvas; border: 2px solid CanvasText;}
}
@media (prefers-contrast: less) {
:root {filter: contrast(75%); color: CanvasText; background-color: Canvas; }
:root:has(#contrast option[value="high"]:checked) { filter: revert;}
}
.frame-3 {display: grid; place-content: center; min-height: 50svh;
font-family: system-ui, sans-serif;}
.frame-3 {display: grid; gap: 1vw; padding: 1vw; border-radius: 0.75vw;
background-color: color-mix(in srgb, rebeccapurple 40%, Canvas);}
.frame-3 div {display: flex; justify-content: space-between; gap: 1vw;}
</style>